<template>
   <!-- 工作日历 -->
   <div>
      <!-- 年和月 -->
      <el-row type="flex" justify="end">
         <!-- 年，用组件的给定一个日期，日期获取年，年取前五年 + 后五年 -->
         <!-- v-model的值为当前被选中的el-option的 value 属性值 
         就是点击谁谁出现在下拉框中
         -->
         <!-- yearList 就是下拉框中的值 -->
         <!-- currentYear 就是当前框中显示的值 -->
         <!-- change	选中值发生变化时触发 -->
         <el-select
            size="small"
            style="width: 120px"
            v-model="currentYear"
            @change="dataChange"
         >
            <el-option
               v-for="item in yearList"
               :key="item"
               :label="item"
               :value="item"
            ></el-option>
         </el-select>
         <el-select
            v-model="currentMonth"
            size="small"
            style="width: 120px;margin-left: 10px "
            @change="dataChange"
         >
            <!-- 循环 12 个月 -->
            <el-option
               v-for="item in 12"
               :key="item"
               :label="item"
               :value="item"
            ></el-option>
         </el-select>
      </el-row>
      <!-- 日历 -->
      <!-- currentDate 如果没有指定就显示现在的时间 -->
      <!-- 把 currentDate 随着触发点击 年跟月的变化而变化 -->
      <el-calendar v-model="currentDate">
         <!-- 在 scoped-slot 可以获取到 date（当前单元格的日期）,
          data是对象（包括 type，isSelected，day 属性） -->
         <!-- <template slot="dateCell"> -->
         <!-- <template v-slot:dateCell> -->
         <template #dateCell="{ date, data }">
            <div class="date-content">
               <span class="text">{{ data.day | getDay }}</span>
               <span v-if="isWeek(date)" class="rest">休</span>
            </div>
         </template>
      </el-calendar>
   </div>
</template>

<script>
export default {
   // 过滤器
   filters: {
      getDay(value) {
         // value的格式：字符串：2021-09-01，横杠分割取最后一个元素
         const day = value.split('-')[2] // 结果： 01
         // 看它是不是 0 开头的，是的话把它截取掉，从第一位开始截取，截取一位， 不是的话直接返回
         return day.startsWith('0') ? day.substr(1) : day
      }
   },
   props: {
      startDate: {
         type: Date,
         // 如果没有传递时间，就取当前时间,回调函数式的返回值
         default: () => new Date()
      }
   },
   data() {
      return {
         // 要遍历的年的数组，下拉框中的值
         yearList: [],
         // 当前年份
         currentYear: null,
         // 当前月份
         currentMonth: null,
         // 当前时间，随着年，月的变化而变化
         currentDate: null
      }
   },
   created() {
      // 获取当前的年份
      this.currentYear = this.startDate.getFullYear()
      // 当前月份
      this.currentMonth = this.startDate.getMonth() + 1
      // 快速生成数组的方法    例： Array.from() 把一个伪数组转成真数组
      // 生成了100个长度的数组，没有内容
      // Array(100)
      // // 可以把这 100 个长度的数组转成100个带内容的对象，但是是 undefined
      // Array.from(Array(100))
      // // 把 undefined 变成 数
      // Array.from(Array(100),function(value, index) {
      //    return value  // 就是  undefined
      //    // 就是 1 -- 100，加多少就是从多少开始的，Array(100) 代表从开始到结束多少位
      //    return index + 1
      // })
      // 取当前年的 前五年跟后五年
      this.yearList = Array.from(
         Array(11),
         (v, i) => this.currentYear + i - 5
      )
      // 到钩子函数执行完成之后，生成一个新的时间，因为当前时间默认值是 null
      // 主动调用一下方法
      this.dataChange()
      // 刚开始进去是今天的时间
      this.currentDate = new Date()
   },
   methods: {
      // 生成新的日期，执行change时 currentYear 跟 currentMonth 已经是最新的了
      // 也就是说点谁谁触发
      // 用最新的触发点击生成最新的时间，这个时间就是我日历所需要的时间
      // 点击上边的下拉框中的选项，改变下边的日历中的时间
      dataChange() {
         // console.log(this.currentYear)
         // 以 1 号为开始,生成最新的时间给下边的日历绑定上
         this.currentDate = new Date(
            `${this.currentYear}-${this.currentMonth}-1`
         )
      },
      // 判断当前是否是周末,是周末就显示 休 这个字
      // 传过来一个当前时间，从插槽中获取的
      isWeek(date) {
         // 等于 6 或者 等于 0 就表示是周六或者周日
         // 例：传入一个周六跟周日的日子
         // new Date('2021-9-4').getDay()   // 6
         // new Date('2021-9-5').getDay()   // 0
         return date.getDay() === 6 || date.getDay() === 0
      }
   }
}
</script>

<style scoped>
::v-deep .el-calendar-day {
   height: auto;
}
::v-deep .el-calendar-table__row td,
::v-deep .el-calendar-table tr td:first-child,
::v-deep .el-calendar-table__row td.prev {
   border: none;
}
.date-content {
   height: 40px;
   text-align: center;
   line-height: 40px;
   font-size: 14px;
}
.date-content .rest {
   color: #fff;
   border-radius: 50%;
   background: rgb(250, 124, 77);
   width: 20px;
   height: 20px;
   line-height: 20px;
   display: inline-block;
   font-size: 12px;
   margin-left: 10px;
}
.date-content .text {
   width: 20px;
   height: 20px;
   line-height: 20px;
   display: inline-block;
}
::v-deep .el-calendar-table td.is-selected .text {
   background: #409eff;
   color: #fff;
   border-radius: 50%;
}
::v-deep .el-calendar__header {
   display: none;
}
</style>
